<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hero - Admin</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <style>
    .hero-list img {
      width: 50px;
      height: 50px;
      display: block
    }

    .hero-list td {
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <%if (current){%>
    <p>
      欢迎您：
      <%=current.userName%>
    </p>
    <%}else{%>
      <a href="/register">点击注册</a>
      <%}%>
        <header>
          <div class="page-header container">
            <h1>王者荣耀
              <small>英雄管理器</small>
            </h1>
          </div>
        </header>
        <div class="container hero-list">
          <a class="btn btn-success pull-right" href="/add">添加英雄</a>
          <table class="table table-hover">
            <thead>
              <th>编号</th>
              <th>名称</th>
              <th>性别</th>
              <th>头像</th>
              <th>操作</th>
            </thead>
            <tbody id="tbody">
              {{each heros value index}}
              <tr>
                <td>{{index+1}}</td>
                <td>{{value.name}}</td>
                <td>{{value.gender}}</td>
                <td>
                  <img src="/upload/{{value.img}}" alt="">
                </td>
                <td>
                  <a href="javascript:;">查看</a>
                  <a href="/edit?id={{value.id}}">编辑</a>
                  <a href="javascript:;" onclick="del({{value.id}})">删除</a>
                </td>
              </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
</body>

</html>
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script>
  function del(id) {
    if (confirm("您是否要删除该数据？")) {
      $.ajax({
        url: "/del",
        type: "GET",
        data: "id=" + id,
        dataType: "json",
        success: function (result) {
          if (result.code == 1) {
            alert("删除成功");
            window.location.href = "/";
          }
        },
        error: function (result) {
          $("body").html(result.responseText);
        }
      })
    }
  }
</script>